<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
</head>
<body>

<div id="myDiv"><h2>获取type为1的work</h2></div>
<button id="b01" type="button">改变内容</button>

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">用户列表</div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <table width="80%" class="table table-striped table-bordered table-hover" id="list">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>名字</th>
                        <th>图片路径</th>
                        <th>描述</th>
                        <th>type</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <!-- /.table-responsive -->
            </div>
            <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
    </div>
    <!-- /.col-lg-12 -->
</div>
</body>
<script src="js/jQuery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //id是list的dataTable
        var table = $('#list').DataTable({
            //访问allwork，获取返回的json
            "ajax": '${contextPath}/show/allwork',
            "columns": [
                //key ： keyValue
                {"allPerson": "id","visible" : false},
                {"allPerson": "name"},
                {"allPerson": "picture"},
                {"allPerson": "describe"}
            ],
        });
        $("#b01").click(function(){
            htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
            $("#myDiv").html(htmlobj.responseText);
        });
    });
    </script>
</html>